<template>
    <div>
        <!-- 第一部分 -->
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:252px;">
                    <div slot="header" class="clearfix">
                        <el-radio-group v-model="radio1" size="small" @change="change1In()">
                          <el-radio-button label="1">本日</el-radio-button>
                          <el-radio-button label="2">本周</el-radio-button>
                          <el-radio-button label="3">本月</el-radio-button>
                        </el-radio-group>
<!-- 
                        <el-button size="small">日</el-button>
                        <el-button size="small">周</el-button>
                        <el-button size="small">月</el-button> -->
                    </div>
                    <div ><!-- style="padding: 20px;" -->
                      <h1 style="font-size: 72px;font-weight: 500">¥{{price}}</h1>
                      <p>订单金额</p>
                  </div>
              </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="mgb20" style="height:252px;">
                <div slot="header" class="clearfix">

                  <el-radio-group v-model="radio2" size="small" @change="change2In()">
                      <el-radio-button label="1">本日</el-radio-button>
                      <el-radio-button label="2">本周</el-radio-button>
                      <el-radio-button label="3">本月</el-radio-button>
                    </el-radio-group>
                </div>
                <!-- style="padding: 20px;" -->
                <div >
                  <h1 style="font-size: 72px;font-weight: 500">{{order}}</h1>
                  <p>订单数量</p>
              </div>
          </el-card>
      </el-col>
      <el-col :span="8">

         <el-card shadow="hover" class="mgb20" style="height:252px;">
            <div slot="header" class="clearfix">

               <el-radio-group v-model="radio3" size="small" @change="change3In()">
                          <el-radio-button label="1">本日</el-radio-button>
                          <el-radio-button label="2">本周</el-radio-button>
                          <el-radio-button label="3">本月</el-radio-button>
                        </el-radio-group>
            </div>
            <div ><!-- style="padding: 20px;" -->
              <h1 style="font-size: 72px;font-weight: 500">{{userN}}</h1>
              <p>新增客户量</p>
          </div>
      </el-card>
  </el-col>
</el-row>


<!-- 第二部分 -->
<el-row :gutter="20">
    <el-col :span="24">
        <el-card shadow="hover" class="mgb20" style="height:252px;">

            <div slot="header" class="clearfix">
                <span>销售额</span>
                <el-button size="small" style="float: right;">金额</el-button>
            </div>
            <div><!--  style="padding: 20px;" -->
              <el-col :span="16">
                <schart ref="bar" class="schart" canvasId="bar" :data="turnoverData" type="bar" :options="options"></schart>
            </el-col>   
            <el-col :span = "8">
                <div >
                    <div style="width: 200px;position: absolute;top: 35%;right:15%;">
                        <div style="display: flex; justify-content: flex-start;align-items: center;padding: 5px;"><span style="padding-right: 20px;">本日 </span><h1 style="text-align:left">{{priceData.day}}</h1></div>
                        <div style="display: flex; justify-content: flex-start;align-items: center;padding: 5px;"><span style="padding-right: 20px;">本周 </span> <h1 style="text-align:left">{{priceData.week}}</h1></div>
                        <div style="display: flex; justify-content: flex-start;align-items: center;padding: 5px;"><span style="padding-right: 20px;">本月 </span> <h1 style="text-align:left">{{priceData.month}}</h1></div>  
                    </div>
                    

                    <div style="position: absolute;top: 70%;right: 10%;border: 1px solid #ccc;padding: 5px 0px;width: 300px;text-align: center;border-radius: 100px;">本月销售总额: ¥{{priceData.month}}</div>
                </div>

                
            </el-col>           
        </div>

    </el-card>
</el-col>
</el-row>

<!-- 地三部分 -->
<el-row :gutter="20">
     <el-col :span="24">
        <el-card shadow="hover" class="mgb20" style="height:252px;">

            <div slot="header" class="clearfix">
                <span>客户</span>
               
            </div>
            <div ><!-- style="padding: 20px;" -->
              <el-col :span="16">
               <!-- <schart ref="line" class="schart" canvasId="line" :data="userData" type="line" :options="options2"></schart> -->
               <schart ref="line" class="schart" canvasId="line" :data="userData" type="bar" :options="options2"></schart>
            </el-col>
            <el-col :spa ="8">
                 <div>
                    <div style="width: 200px;position: absolute;top: 35%;right:15%;">
                        <div style="display: flex; justify-content: flex-start;align-items: center;padding: 5px;"><span style="padding-right: 20px;">本日 </span><h1 style="text-align:left">{{userNum.day}}</h1></div>
                        <div style="display: flex; justify-content: flex-start;align-items: center;padding: 5px;"><span style="padding-right: 20px;">本周 </span> <h1 style="text-align:left">{{userNum.week}}</h1></div>
                        <div style="display: flex; justify-content: flex-start;align-items: center;padding: 5px;"><span style="padding-right: 20px;">本月 </span> <h1 style="text-align:left">{{userNum.month}}</h1></div>  
                    </div>
                    
                    <div style="position: absolute;top: 70%;right: 10%;border: 1px solid #ccc;padding: 5px 0px;width: 300px;text-align: center;border-radius: 100px;">我的客户总量: {{userNum.all}}</div>
                </div>
            </el-col>
        </div>
    </el-card>
</el-col>
</el-row>


<!-- 第四部分 -->
<el-row :gutter="20">
     <el-col :span="24">
        <el-card shadow="hover" class="mgb20" style="height:252px;">

            <div slot="header" class="clearfix">
                <span>活动</span>
                  <el-select v-model="active_change" filterable placeholder="请选择" style="float: right;" @change="picChange()">
                    <el-option v-for="item in activeList" :key="item.active_id" :label="item.active_name" :value="item.active_id">
                    </el-option>
                  </el-select>
            </div>
            <div ><!-- style="padding: 20px;" -->
              <el-col :span="12">
               <!-- <schart ref="line" class="schart" canvasId="line" :data="userData" type="line" :options="options2"></schart> -->
               <schart ref="pie" class="schart" canvasId="pie" :data="activeData" type="pie" :options="polar"></schart>
            </el-col>
            <!-- <el-col :span="4">
                <img src="static/img/img.jpg">
            </el-col> -->
            <el-col :spa ="8">

                 <div>
                    <div style="width: 200px;position: absolute;top: 35%;right:15%;">

                        <div style="display: flex; justify-content: flex-start;align-items: center;padding: 5px;"><span style="padding-right: 20px;">参与人数 </span><h1 style="text-align:left">{{activeData[0].value}}</h1></div>
                        <div style="display: flex; justify-content: flex-start;align-items: center;padding: 5px;"><span style="padding-right: 20px;">消费人数 </span> <h1 style="text-align:left">{{activeData[1].value}}</h1></div>  
                        <div style="display: flex; justify-content: flex-start;align-items: center;padding: 5px;"><span style="padding-right: 20px;">分享次数 </span> <h1 style="text-align:left">{{activeData[2].value}}</h1></div>
                        
                    </div>
                    
                   <!--  <div style="position: absolute;top: 70%;right: 10%;border: 1px solid #ccc;padding: 5px 0px;width: 300px;text-align: center;border-radius: 100px;">我的客户总量: {{userNum.all}}</div> -->
                </div>
            </el-col>
        </div>
    </el-card>
</el-col>
</el-row>

</div>
</template>

<script>
    import Schart from 'vue-schart';
    import bus from '../common/bus';
    export default {
        inject:['reload'],
        name: 'dashboard',
        data() {
            return {
                radio1:'1',
                radio2:'1',
                radio3:'1',
                countAll:[],              //统计数量
                name: JSON.parse(localStorage.getItem('ms_username')),
                // todoList:[],                                                                 //排行榜
                turnoverData:[],
                // salesData:[],                                             //销量

                /*柱形图*/
                options: {
                    title: '最近七天每天的销售金额',
                    showValue: true,
                    fillColor: 'rgb(45, 140, 240)',
                    bottomPadding: 30,
                    topPadding: 30
                },
                /*线形图*/
                options2: {
                    // title: '最近七天新增客户量',
                    // fillColor: '#FC6FA1',
                    // axisColor: '#008ACD',
                    // contentColor: '#EEEEEE',
                    // bgColor: '#F5F8FD',
                    // bottomPadding: 30,
                    // topPadding: 30
                    title: '最近七天新增客户量',
                    showValue: true,
                    fillColor: 'rgb(45, 140, 240)',
                    bottomPadding: 30,
                    topPadding: 30
                },
                /*饼状图*/
                polar:{
                color: [
                      'blue',
                      '#2f4554',
                      '#61a0a8',
                      '#d48265',
                      '#91c7ae',
                      '#749f83', 
                      '#ca8622',
                      '#bda29a',
                      '#6e7074',
                      '#546570',
                      '#c4ccd3'
                      ],
                // title: {
                //   text: '饼图程序调用高亮示例',
                //   x: 'center'
                // },
                // tooltip: {
                //   trigger: 'item',
                //   formatter: function(params){ // 自定义tooltip显示内容
                //     console.log(params)
                //     return `${params.name}<br/>a`;
                //   }
                // },
                // legend: {
                //   orient: 'vertical',
                //   left: 'left',
                //   data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                // },
                // series: [
                //   {
                //     name: '',
                //     type: 'pie',
                //     radius: '55%',
                //     center: ['50%', '60%'],
                //     data: [
                //       {value: 335, name: '直接访问'},
                //       {value: 310, name: '邮件营销'},
                //       {value: 234, name: '联盟广告'},
                //       {value: 135, name: '视频广告'},
                //       {value: 1548, name: '搜索引擎'}
                //     ],
                //     itemStyle: {
                //       emphasis: {
                //         shadowBlur: 10,
                //         shadowOffsetX: 0,
                //         shadowColor: 'rgba(0, 0, 0, 0.5)'
                //       }
                //     }
                //   }
                // ]
              },

                lasttime:new Date().getFullYear()+"-"+(new Date().getMonth()+1)+"-"+(new Date().getDate()-1),
                orderNum:[],
                order:0,
                priceData:[],
                price:0,
                userNum:[],
                userN:0,
                userData:[],
                activeList:[],
                active_change:'',
                activeData:[],
            }
        },
        components: {
            Schart
        },
        computed: {
            role() {
                return this.name === 'admin' ? '超级管理员' : '普通用户';
            }
        },
        created(){
            this.init();
            this.handleListener();
            // this.reload()
            // this.changeDate();

            // var box = document.querySelector('.content-box')
            // box.className += 'box-index'

        },
        activated(){
            this.handleListener();
        },
        deactivated(){
            window.removeEventListener('resize', this.renderChart);
            bus.$off('collapse', this.handleBus);
        },
        methods: {
            init(){
                //统计
                this.$axios.get('admin/index/countall').then((res)=>{
                    if(res.data.status == 0){
                        this.countAll = res.data.data
                    }else{
                        this.$message.error(res.data.msg)
                    }
                    
                })
                 //7天营业额
                 this.$axios.get('admin/index/turnover').then((res)=>{
                    if(res.data.status == 0){
                        // this.todoList = res.data.data
                        if(res.data.data.length > 15){
                            this.turnoverData = res.data.data.slice(0,15)
                        }else{
                           this.turnoverData = res.data.data
                       }
                   }else{
                    this.$message.error(res.data.msg)
                }

            })
                //日周月 
                //订单金额

                this.$axios.get('admin/index/couprice',{params:{
                    aid: this.name['admin_id'],
                    token: this.name['token'],
                }}).then((res)=>{
                    if(res.data.status == 0){
                        // this.todoList = res.data.data
                       
                        this.priceData = res.data.data
                        this.price = this.priceData.day
                    
                   }else if(res.data.status == 3){
                        this.$router.push('login') 
                   }else{
                    this.$message.error(res.data.msg)
                }
                })
                //数量
              this.$axios.get('admin/index/countorder').then((res)=>{
                    if(res.data.status == 0){
                        // this.todoList = res.data.data
                       
                        this.orderNum = res.data.data
                        this.order = this.orderNum.day
                   }else{
                    this.$message.error(res.data.msg)
                }
                })

                //客户
                this.$axios.get('admin/index/adduser').then((res)=>{
                    if(res.data.status == 0){
                        // this.todoList = res.data.data
                       
                        this.userNum = res.data.data
                        this.userN =  this.userNum.day
                   }else{
                    this.$message.error(res.data.msg)
                }
                })
                //7天新增客户
                 this.$axios.get('admin/index/reguser').then((res)=>{
                    if(res.data.status == 0){
                        // this.todoList = res.data.data
                       
                        this.userData = res.data.data
                    
                   }else{
                    this.$message.error(res.data.msg)
                }
                })

                 // 活动
                 this.$axios.get('admin/index/allactive').then((res)=>{
                    if(res.data.status == 0){
                        // this.todoList = res.data.data 
                        this.activeList = res.data.data
                        this.active_change = this.activeList[0].active_id
                        this.picData()
                    }else if(res.data.status == 10){
                         this.activeList = []
                         this.active_change =''
                    }else {
                        this.$message.error(res.data.msg)
                }
                })

             },
            // changeDate(){
            //     const now = new Date().getTime();
            //     this.data.forEach((item, index) => {
            //         const date = new Date(now - (6 - index) * 86400000);
            //         item.name = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
            //     })
            // },
            handleListener(){
                bus.$on('collapse', this.handleBus);
                // 调用renderChart方法对图表进行重新渲染
                window.addEventListener('resize', this.renderChart)
            },
            handleBus(msg){
                setTimeout(() => {
                    this.renderChart()
                }, 300);
            },
            renderChart(){
                this.$refs.bar.renderChart();
                this.$refs.line.renderChart();
                this.$refs.pie.renderChart();
            },
            change1In(){
                // console.log(this.radio1)
                if(this.radio1 == 1){
                    this.price = this.priceData.day
                }else if(this.radio1 == 2){
                    this.price = this.priceData.week
                }else{
                    this.price = this.priceData.month
                }
            },
            change2In(){
                // console.log(this.radio1)
                if(this.radio2 == 1){
                    this.order = this.orderNum.day
                }else if(this.radio2 == 2){
                    this.order = this.orderNum.week
                }else{
                    this.order = this.orderNum.month
                }
            },
            change3In(){
                // console.log(this.radio1)
                if(this.radio3 == 1){
                    this.userN = this.userNum.day
                }else if(this.radio3 == 2){
                    this.userN = this.userNum.week
                }else{
                    this.userN = this.userNum.month
                }
            },
            picData(){
                this.$axios.get('admin/index/activeinfo',{params:{
                    active_id:this.active_change 
                }}).then((res)=>{
                    if(res.data.status == 0){
                        // this.todoList = res.data.data 
                        this.activeData = res.data.data
                    }else {
                        this.$message.error(res.data.msg)
                }
                })
            },
            picChange(){
                this.picData()
            }
        }
    }

</script>


<style scoped>
/*.content{
    background: #1092e4 !important;
}*/
.el-row {
  /*  margin-bottom: 20px;*/
}

.grid-content {
    display: flex;
    flex-direction:column;
    align-items: center;
    /*height: 250px;*/
    padding: 50px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
.el-card.is-hover-shadow{
    height: auto !important; 
}
.el-carousel{
    height: 135px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 100%;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

</style>
